<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例——使用计算属性语法</title>
</head>
<body>
<div id="app">
    姓氏：<input type="text" name="fistName" v-on:keyup.enter="onFirstName" id="fistName">
    <br>
    名字：<input type="text" name="familyName" v-on:keyup.enter="onFamilyName" id="familyName">

    <!--  直接使用模板差值实现  -->
    <div>姓名：{{familyName}} {{firstName}}</div>
    <div>姓名：{{ getFullName() }}</div>
    <div>姓名：{{ fullName }}</div>
    <hr>
    <div>姓名：{{ getFullName() }}</div>
    <div>姓名：{{ fullName }}</div>
</div>
<script type="module">
    import {createApp, ref, computed} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup() {
            let firstName = ref(null)
            let familyName = ref(null)

            function onFirstName(event) {
                let element = document.getElementById("fistName")
                console.log(element.value);
                firstName.value = element.value
            }

            function onFamilyName(event) {
                let element = document.getElementById("familyName")
                console.log(element.value);
                familyName.value = element.value
            }

            function getFullName() {
                return familyName.value + " " + firstName.value
            }

            let fullName = computed(() => {
                return familyName.value + " " + firstName.value
            })

            return {
                firstName,
                familyName,
                onFirstName,
                onFamilyName,
                getFullName,
                fullName,
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>